<template>
	<van-popup v-model="visible" position="bottom" round closeable :duration="0.2">
		<div class="choice-city">
			<div class="title">选择城市{{ tpl.form_type == 2 ? "参团" : "预约" }}</div>
			<div class="list">
				<city-list
					:biz_id="biz_id"
					:multiple="multiple"
					:tpl="tpl"
					v-model="active"
					@select="confirm"
				/>
			</div>
			<!-- <div class="submit">
				<van-button block color="#ff7400" @click="confirm">确 定</van-button>
			</div> -->
		</div>
	</van-popup>
</template>
<script>
import CityList from "./city-list";
export default {
	components: {
		CityList
	},
	props: {
		biz_id: [String, Number],
		multiple: {
			type: Boolean,
			default: true
		},
		tpl: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			visible: false,
			list: [],
			active: []
		};
	},
	watch: {
		biz_id() {
			this.getAdFormCity();
		}
	},
	created() {
		this.getAdFormCity();
	},
	methods: {
		open() {
			this.visible = true;
		},
		close() {
			this.visible = false;
		},
		confirm(v) {
			// if (!this.active.length) {
			// 	this.$toast("请选择城市参团");
			// 	return;
			// }
			this.close();
			this.$emit("confirm", v);
			// this.active = [];
		},
		async getAdFormCity() {
			if (!this.biz_id) return;
			this.list = await this.$api.getAdFormCity({ biz_id: this.biz_id });
		}
	}
};
</script>
<style lang="scss" scoped>
.choice-city {
	max-height: 60vh;
	display: flex;
	flex-direction: column;
	text-align: center;
	overflow: hidden;
	.title {
		margin: 0.3555555rem 0.17777rem;
		font-weight: 500;
		font-size: 0.4rem;
		color: #222;
		line-height: 1;
	}
	.list {
		border-top: 1px solid #f1f0f0;
		flex: 1;
		overflow: auto;
		padding: 0.22222rem 0.11111rem;
	}
	.submit {
		box-shadow: 0 0 0.222222rem #eee;
		padding: 0.33333rem 0.555555rem;
	}
}
</style>
